import * as React from 'react'
import { useAuth } from '@/providers/auth-provider'
import { LoginModal } from '@/components/login-modal'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Lock } from 'lucide-react'

interface AuthGuardProps {
    children: React.ReactNode
    fallback?: React.ReactNode
}

export function AuthGuard({ children, fallback }: AuthGuardProps) {
    const { user, token } = useAuth()
    const [showLoginModal, setShowLoginModal] = React.useState(false)

    // 如果用户已登录，直接显示内容
    if (user && token) {
        return <>{children}</>
    }

    // 如果有自定义的fallback，使用它
    if (fallback) {
        return <>{fallback}</>
    }

    // 默认的未登录提示
    return (
        <>
            <div className="min-h-screen flex items-center justify-center p-4">
                <Card className="w-full max-w-md">
                    <CardHeader className="text-center">
                        <div className="mx-auto w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
                            <Lock className="w-6 h-6 text-gray-600 dark:text-gray-400" />
                        </div>
                        <CardTitle className="text-xl">需要登录</CardTitle>
                        <CardDescription>
                            请先登录以查看体重管理功能
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <Button 
                            className="w-full" 
                            onClick={() => setShowLoginModal(true)}
                        >
                            立即登录
                        </Button>
                    </CardContent>
                </Card>
            </div>
            <LoginModal 
                open={showLoginModal} 
                onClose={() => setShowLoginModal(false)} 
            />
        </>
    )
}

// 轻量级的认证提示组件，用于页面内嵌
export function AuthPrompt({ message = "请先登录以查看此功能" }: { message?: string }) {
    const { user, token } = useAuth()
    const [showLoginModal, setShowLoginModal] = React.useState(false)

    if (user && token) {
        return null
    }

    return (
        <>
            <div className="flex items-center justify-center p-8">
                <div className="text-center">
                    <div className="mx-auto w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
                        <Lock className="w-6 h-6 text-gray-600 dark:text-gray-400" />
                    </div>
                    <p className="text-gray-600 dark:text-gray-400 mb-4">{message}</p>
                    <Button onClick={() => setShowLoginModal(true)}>
                        立即登录
                    </Button>
                </div>
            </div>
            <LoginModal 
                open={showLoginModal} 
                onClose={() => setShowLoginModal(false)} 
            />
        </>
    )
}